<!--

  Vant的Notice通知栏

  props:
    mode:(String)                       通知栏模式，可选值为 closeable link
    text:(String)                       通知文本内容
    color:(String)                      通知文本颜色
    background:(String)                 滚动条背景
    left-icon:(String)                  左侧图标名称或图片链接
    delay:(String || Number)            动画延迟时间 (s)
    speed:(String || Number)            滚动速率 (px/s)
    scrollable:(Boolean)                是否开启滚动播放，内容长度溢出时默认开启
    wrapable:(Boolean)                  是否开启文本换行，只在禁用滚动时生效

  slot:
    default	                            通知文本内容
    left-icon	                          自定义左侧图标
    right-icon	                        自定义右侧图标

  events:
    click                              	点击通知栏时触发	event: Event
    close	                              关闭通知栏时触发	event: Event
    replay                              v2.6.2	每当滚动栏重新开始滚动时触发	-

  demo:
    <qm-notice-bar
      class="qm-notice-bar"
      color="#FFA029"
      background="#FFF9ED"
      wrapable
      left-icon="volume-o"
      text="用户已成功提交资料！"
    />

  更多帮助请查看Vant官网： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/notice-bar

-->


<template>
  <van-notice-bar
    v-bind="$attrs"
    v-on="$listeners"
    class="qm-notice-bar"
  >
    <template v-for="(index, name) in $slots" :slot="name">
      <slot :name="name" />
    </template>
  </van-notice-bar>
</template>

<script>
import {NoticeBar} from "vant";
export default {
    inheritAttrs: true,
    components: {
        [NoticeBar.name]: NoticeBar
    },

}
</script>

<style lang="less" scoped>
.qm-notice-bar{
    border-radius: 100vh;
    color: #ed9910;
    font-size: var(--font-size-subcontent-2);
    line-height: calc(33px * var(--ratio));
}
</style>
